  
<template>
   <div>
        
    <div class="calendar">
        
        <ul class="weekdays">
            <li>星期日</li>
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
            <li>星期六</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">

        <li  v-for="(item, index) in days" :key="index" :class="{'is-class': item.classNum||item.isShow}" >
            <p v-show="item.classNum" @click.stop="getDayClass(currentYear+'-'+currentMouth+'-'+item.day)">当天已安排课时{{item.classNum}}节</p>
            <span v-if="item.type==='current'">{{item.day}}</span>
            <span v-else style="color: #ccc;">{{item.day}}</span>
        </li>

        </ul>

    </div>

    <!--弹窗-->
        <el-dialog title="当天排课信息" :visible.sync="dialogTableVisible" size="large">
            <el-table :data="gridData" v-loading="loading">
                <el-table-column property="subjectStr" label="科目" width="150"></el-table-column>
                <el-table-column property="gradeStr" label="年级" width="150"></el-table-column>
                <el-table-column property="dateStr" label="时间" width="120"></el-table-column>
                <el-table-column property="trainTypeStr" label="培训类型" width="100"></el-table-column>
                <el-table-column property="classOject" label="培训对象" width="100"></el-table-column>
                <el-table-column property="studentNo" label="学生／班级编号" width="150"></el-table-column>
                <el-table-column property="studentName" label="学生／班级名称" width="150"></el-table-column>
                <el-table-column property="teacherNo" label="教师编号" width="100"></el-table-column>
                <el-table-column property="teacherName" label="教师名称" width="100"></el-table-column>
                <!-- <el-table-column property="" label="备课信息">
                    <template scope="scope">
                        <el-button type="text" size="small">详情</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-dialog>

        

   </div>
</template>
  <script>
    import axios from 'axios'
    import httpUrl from '@/assets/common'
    import {  Message  } from 'element-ui';
    export default {
      props: {
        value: {
            default: ''
        },
        teacDList: {
            default: ''
        }
     },
      data() {
          return {
            formInline: {
                value4: '',
            }, 
            titleStr: '',
            days: [],
            dataFuwu: [],
            arrangeId: '',
            loading: false,
            dialogTableVisible: false,
            currentYear: '',
            currentMouth: '',
            gridData: [], // 弹窗数据
            stuObj: {},
            teacObj: {},
            dateSectionArr: [],
            dateVal: [],
            planDate: '',
            currentIndex: 0,
          }
      
    },
    created: function() {
        this.getDate()
    },
    watch: {
        value(val) {
            this.stuObj = val;
        },
        teacDList(val) {
            this.teacObj = val;
        }
    },
    methods: {
          
         
        // 获取当天排课
        getDayClass(date) {
            axios({
                method: 'post',
                url: httpUrl + 'web/train/TrainClassPlanInfo/planClassDayList',
                data: {planDate: date },
                headers: { 'token': this.TOKEN }
            }).then(res => {

                if (res.data.code == 200) {
                    this.dialogTableVisible = true;
                    this.gridData = res.data.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.data.message);
                    this.loading = false;
                }
            })
        },
        getDays(res) {
            let dayArr = [];
            
            let _firstDay = new Date(this.currentYear, this.currentMouth - 1, 1);  // 当前月第一天

            for(var i = 0; i < 42; i++) {
                let _thisDay = new Date(this.currentYear, this.currentMouth - 1, i + 1 - _firstDay.getDay());
                let _thisDayStr = this.getDateStr(_thisDay);
                if(_thisDayStr.substr(0, 6) == this.getDateStr(_firstDay).substr(0, 6)) {
                    dayArr.push({
                        type: 'current',
                        day: _thisDay.getDate()
                    })
                } else {
                    dayArr.push({
                        type: 'other',
                        day: _thisDay.getDate()
                    })
                }
                this.days = dayArr;
            }
            if(res.length !== 0) {
                let obj = {};
                res.forEach(v => {
                    obj[`day${v.day}`] = v
                })

                this.days.forEach(v => {
                    if(obj[`day${v.day}`]) {
                        v.classNum = obj[`day${v.day}`].classNum
                    }
                })
            }
      },
      // 获取当前月课时安排
      getCurrentYClass(dateParams) {

          let _date = dateParams ? dateParams : new Date(this.dataFuwu);
          this.currentYear = _date.getFullYear();
          this.currentMouth = _date.getMonth() + 1;

          axios({
                method: 'post',
                url: httpUrl + 'web/train/TrainClassPlanInfo/planClassByTrainAndPlanDate',
                data: { arrangeId: this.stuObj.arrangeId, year: this.currentYear.toString(), month: this.currentMouth.toString().padStart(2, '0') },
                headers: { 'token': this.TOKEN }
            }).then(res => {
                log(res)
                if (res.data.code == 200) {
                    this.getDays(res.data.data)
                    // this.classNum = res.data.data
                }
            })
      },
      // 获取服务器时间
        getDate() {
            axios({
                method: 'get',
                url: httpUrl + 'web/Dictionary/getNowTime',
                headers: { 'token': this.TOKEN }
            }).then(res => {
                if (res.data.code == 200) {
                    this.dataFuwu = res.data.data;
                    this.getCurrentYClass();
                }
            })
        },
      dateSearch() {
        this.getCurrentYClass(this.formInline.value4)
      },
      // 日期转化为字符串， 4位年+2位月+2位日
      getDateStr(date) {
        var _year = date.getFullYear();
        var _month = date.getMonth() + 1;    // 月从0开始计数
        var _d = date.getDate();

        _month = (_month > 9) ? ("" + _month) : ("0" + _month);
        _d = (_d > 9) ? ("" + _d) : ("0" + _d);
        return _year + _month + _d;
      },
    }, 
  }
   
    
  </script> 
  <style scoped>
    .calendar {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid rgb(223, 230, 236);
        overflow: hidden;
    }
    .calendar .calendar-title-box { 
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
ul{
    padding: 0;
      margin: 0;
}
  ul li {
      list-style: none;
      float: left;
      width: 14.2%;
  }
   .weekdays li {
      border-bottom: 1px solid rgb(223, 230, 236);
      height: 40px;
      text-align: center;
      background: #eef1f6;
      line-height: 40px;
      font-weight: bold;
  }
  .weekdays li+li {
      border-left: 1px solid rgb(223, 230, 236);
  }
  .days li {
      border-bottom: 1px solid rgb(223, 230, 236);
      height: 80px;
      position: relative;
  }
  .days li span {
      position: absolute;
      top: 24px;
      right: 10px;
      font-size: 20px;
  }
  .days li p {
      font-size: 16px;
      text-align: center;
      color: #20a0ff;
      cursor: pointer;
      margin-top: 5px;
  }
  .days li div {
      font-size: 16px;
      color: #20a0ff;
      position: absolute;
      bottom: 2px;
      left: calc((100% - 80px)/2);
      cursor: pointer;
  }
  .days li+li {
      border-left: 1px solid rgb(223, 230, 236);
  }
  .is-class {
      background: #0ff0ff
  }
  </style>
  